<template>
    <div class="container">
		<el-form>
			<el-row>
				<el-col :span="4">
					<div style="width:200px;height:200px; border:1px solid #ccc;">
						<img  :src="api + ruleForm.plantImg" alt="" style="width:100%;height:100%;">
					</div>
				</el-col>
				<el-col :span="12" style="margin-left:30px;">
					<div>
						<span style="font-size:18px; font-weight:600;">{{ruleForm.plantName}}</span>
						<span class="mar-l">种植批次号:{{ruleForm.batch}}</span>
					</div>
					<div style="margin-top:30px;font-size:14px;">
						<span>种植面积：{{ruleForm.plantArea}}亩</span>
						<span class="mar-l">种植地块：{{ruleForm.soilName}}</span>
						<span class="mar-l">种植时间：{{ruleForm.plantTime}}</span>
					</div>
					<div class="con">
						<div style="margin-top:10px;"><span>生长:{{this.iday}}天</span><span style="position:absolute;left:200px;">预计收获时间：{{ruleForm.reapTime}}</span></div>
						<div style="margin-top:20px;"><span>种苗数量：{{ruleForm.plantNumber}}{{ruleForm.units}}</span><span style="position:absolute;left:200px;">种植人：{{ruleForm.plantUserName}}</span></div>
					</div>
				</el-col>
			</el-row>
			<el-row style="margin-top:30px;background:#f5f5f5;">
				<el-tabs v-model="activeName" @tab-click="handleClick" >
					<el-tab-pane v-for="(item,index) in list" :key="index" :label="'第' + (index+1)+ '年'" :name="'第' + (index+1) + '年'" >
						<div style="display: flex; flex-wrap: wrap;justify-content: flex-start;">
							 <div class="addtend" v-for="(s,index) in item" :key="index"  style="margin:30px;padding:10px;font-size:8px;position:relative;">
								<div style="width:20px; margin:0 auto;line-height:24px;font-size:12px;position: absolute;right:0px;top:0px;background:#3aa0ff;text-align: center;color:white;">{{s.type}}</div>
								<el-form-item label="操作时间">
									{{s.beginTime}}至{{s.endTime}}
								</el-form-item>
								<el-form-item label="操作人">
									{{s.principalName}}
									<el-button type="success" round size="mini" v-if="s.finished == true" style="float: right;margin-right:20px;">任务完成</el-button>
									<el-button type="danger" round size="mini" v-if="s.finished == false" @click="gotask(s)" style="float: right;margin-right:20px;">任务未完成</el-button>
								</el-form-item>
								<img v-if="s.img != '' && s.img != null" :src="$store.state.imageUrls + s.img" alt="" style="width:300px;height:130px;">
							</div>
						</div>
					  
					</el-tab-pane>
				</el-tabs>
				<!-- <div style="display: flex;flex-direction: row;justify-content: flex-start;flex-wrap: wrap;" v-else>
					<div class="addtend" v-for="(s,index) in onelist" :key="index"  style="margin:30px;padding:10px;font-size:8px;position:relative;">
						<div style="width:20px; margin:0 auto;line-height:24px;font-size:12px;position: absolute;right:0px;top:0px;background:#3aa0ff;text-align: center;color:white;">{{s.type}}</div>
						<el-form-item label="操作时间">
							{{s.beginTime}}至{{s.endTime}}
						</el-form-item>
						<el-form-item label="操作人">
							{{s.principalName}}
							<el-button type="success" round size="mini" v-if="s.principalName !='' && s.principalName != null" style="float: right;margin-right:20px;">任务完成</el-button>
							<el-button type="danger" round size="mini" v-if="s.principalName == null" style="float: right;margin-right:20px;">任务未完成</el-button>
						</el-form-item>
						<img :src="$store.state.imageUrls + s.img" alt="" style="width:300px;height:130px;">
					</div>
				</div> -->
			</el-row>
			<el-form-item class="footerFixed" label-width="0px">
			    <el-button @click="backPage" >返回</el-button>
			</el-form-item>
		</el-form>
    </div>
</template>

<script>
    import {plant_findById,farm_findByUserId,plant_view} from "@/request/api"
    export default {
        data(){
            return{
                iday:'',
                api:this.$store.state.plantImg,
                id:'',
                activeName:'第1年',
                ruleForm:'',
				list:[],
				i:'',
				onelist:[]
            }
        },
        mounted(){
            this.id = this.$route.query.id
            this.init()
            
        },
        methods:{
			gotask(s){
				if(s.status == 2){
					this.$router.push({
						path:'/plant/tending/addtending',
						query:{
							sid:s.id
						}
					})
				}else{
					this.$notify({
						title: '提示',
						message: '您不是该任务执行人',
						type: 'info'
					});
				}
				
			},
			backPage(){
				this.$router.go(-1)
			},
            init(){
				plant_view(this.id).then((res)=>{
					this.ruleForm = res.plant
					var date1 =  new Date().getFullYear() +  "-" +(new Date().getMonth() + 1).toString().padStart(2, "0") +  "-" + new Date().getDate().toString().padStart(2, "0")
				   var date2 = this.ruleForm.plantTime.replace(/\//g,"-")
				   var date1 = Date.parse(date1)
				   var date2 = Date.parse(date2)
				  
				   var day =  date1 - date2
				   var day = Math.abs(day)
				   this.iday = Math.floor(day/(24*3600*1000))
				   this.list = res.farms
				})
				
            },
            handleClick(){

            },
            goadded(){
                this.$router.push({
                    path:'/plant/tending/addtending',
					query:{id:this.id}
                })
            }
        }
    }
</script>

<style scoped>
    .mar-l{
        margin-left:30px;    
    }
    .con{
        width:400px;
        /* height:100px; */
        background:#E8F1FF;
        border-radius:10px;
        margin-top:25px;
        padding:15px;
        font-size:14px;
        position:relative;
    }
    .addtend{
        display:inline-block;
        width: 300px;
        margin-left:20px;
		
        /* margin:20px; */
        height:200px;
        /* line-height:200px;
        text-align: center; */
        background:#fff;
    }
    .el-form-item{
		margin-bottom:0px;
	}
</style>
